<template>
    <view class="page-content">  
        <sub-navbar title="我的" :isBack="false"  bgColor="transparent"></sub-navbar> 
        <view class="main-view">
            <view class="card-top">
                <view class="avatar-view">
                    <up-image :src="userInfo.avatar" width="80px" height="80px" shape="circle"></up-image>
                </view>
                <view class="name-view" v-if="token" @click.stop="handleBase">
                    <view class="name">
                        <text>{{userInfo.nickName ? userInfo.nickName : userInfo.mobile }}</text>
                    </view>
                    <view class="edit-view">
                        <text>信息编辑</text>
                        <up-icon name="arrow-right-double" size="13"></up-icon>
                    </view>
                </view>
                <view class="login-view" v-else @click="handleLogin">
                    <text>立即登录</text>
                </view>
            </view>

            <view class="box-view">
                <view class="item" @click="handleAddress">
                    <up-icon name="map-fill" color="#F3E7E9" size="20"></up-icon>
                    <view class="con">地址管理</view>
                    <up-icon name="arrow-right" size="16"></up-icon>
                </view>
                <view class="item" @click="handleSettings">
                    <up-icon name="setting-fill" color="#F3E7E9" size="20"></up-icon>
                    <view class="con">设置</view>
                    <up-icon name="arrow-right" size="16"></up-icon>
                </view>
            </view>
        </view>
    </view>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import { userAppInfo } from '@/store/modules/user';
import { storeToRefs } from 'pinia';
const store = userAppInfo();
const { userInfo, token } = storeToRefs(store);

const handleBase = () => {
    uni.navigateTo({
        url: "/subPackage/pages/editInfo/index"
    })
}

const handleSettings = () => {
    uni.navigateTo({
        url: "/subPackage/pages/systemSettings/index"
    })
}

const handleLogin = () => {
    uni.redirectTo({
        url: "/pages/login/index"
    })
}

const handleAddress = () => {
    uni.navigateTo({
        url: "/subPackage/pages/address/index"
    })
}
</script>

<style lang="scss" scoped>
.page-content{
    background: linear-gradient(to bottom,#F3E7E9 0%, #E3EEFF 25%, #EEEEEE 100%);
    .main-view{ 
        flex: 1;
        padding: 0 25rpx;
        overflow-y: auto;
        .card-top{
            margin: 25rpx 0;
            padding: 25rpx;
            background-color: #FFFFFF;
            border-radius: 16rpx;
            display: flex;
            .avatar-view{
                margin-right: 20rpx;
            }
            .name-view{
                display: flex;
                flex-direction: column;
                .name{
                    padding-top: 20rpx;
                    color: $uni-text-color;
                }
                .edit-view{
                    padding: 10rpx 0;
                    font-size: 24rpx;
                    color: $uni-text-color-grey;
                    display: flex;
                    align-items: center;
                }
            }
            .login-view{
                display: flex;
                align-items: center;
            }
        }
        .box-view{
            padding: 0 25rpx;
            background-color: #FFFFFF;
            border-radius: 16rpx;
            .item{
                width: 100%;
                display: flex;
                align-items: center;
                padding: 25rpx 0;
                border-bottom: 1rpx solid #efefef;
                &:last-child{
                    border-bottom: none;
                }
                .con{
                    flex: 1;
                    margin: 0 10rpx;
                }
            }
            
        }
    }
}

</style>